<template>
  <!-- 不需要根标签了 -->
  <h1>hello vue3</h1>
  <button @click="handleClick1">按钮</button>
  <button @click="handleClick1()">按钮</button>
  <button @click="handleClick1(111, 222, 333)">按钮</button>
  <button @click="handleClick1(111, 222, 333, $event)">按钮</button>
  <button @click="count++">按钮</button>
  <p v-memo="[count]">{{ count }}</p>
</template>

<script lang="ts">
import { defineComponent } from "vue";
/*
  常用指令
    v-for 遍历数据展示
      v-for="(item, index) in xxx" :key="item.id"

      虚拟DOM Diff算法？
        初始化渲染 -> 虚拟DOM树（本质上就是一个对象，对象上属性代表真实DOM元素的一些信息）（旧）
        更新 --> 虚拟DOM树(新) --> 新树和旧树对比，找出差异部分（使用虚拟DOM Diff算法），就要更新的内容

      key有什么作用？
        虚拟DOM Diff算法，更新尽可能复用DOM节点

      key取值？
        保证更新前后元素key属性的值不变且唯一
        使用id。
        使用index（一般不能使用，如果元素将来不会变化了，能使用）

    v-if / v-else-if / v-else 条件渲染
    v-show 条件渲染

      v-if和v-show的区别？
        隐藏时，v-if会删除元素，v-show通过样式display:none来隐藏元素
        频繁切换，用v-show更好
        不频繁切换，用v-if更好

      同时给元素绑定v-if和v-for，谁优先级更高：
        - vue2：v-for更高(同时，如果v-for和v-if一起使用会报错)
          <template v-if="false">
            <li v-for="item in 100"></li>
          </template>
        - vue3：v-if更高

    v-on 绑定事件
      回调函数不同写法，接受的参数就不一样。
        handleClick1                          event
        handleClick1()                        没有参数
        handleClick1(111, 222, 333)           111, 222, 333
        handleClick1(111, 222, 333, $event)   111, 222, 333, event
      
      事件修饰符
        .prevent 用来阻止事件默认行为
        .stop
        .once
        .native(Vue3没有)

      按键修饰符
        .enter 

      其他内容在文档中：https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers
      
    v-bind 给标签属性绑定动态数据
    v-model 双向数据绑定
      - input 和 textarea, 绑定value属性和input事件
      - checkbox 和 radio，绑定checked属性和change事件
      - select，绑定value属性和change事件
    v-slot 插槽

  其他指令
    v-text 设置元素文本内容，textContent
    v-html 设置元素innerHTML
    v-pre  元素里面语法不会被解析，原封不动渲染 
    v-cloak 防止闪屏
    v-once 只解析一次

  新增指令
    v-memo 用来缓存DOM元素的
      v-memo="[xxx]" 当数组中依赖项发送变化，元素才会重新渲染
    
    keep-alive 用来缓存组件
*/
export default defineComponent({
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    handleClick1(...args: any[]) {
      // ...args 用来取缔 arguments
    },
  },
});
</script>

<style scoped></style>
